<!-- 好友列表 -->
<template>
	<view class="bd">

		<!-- 装饰 -->
		<view class="decon">
			<view class="titleContainer">
				<text class="titleText">聊天</text>

				<navigator class="notificationButton" url="/pages/friendsLists/notifications">
					<uni-icons type="notification" size="60rpx"></uni-icons>
					<view class="unreadCount" v-if="pendingFriends.length">{{ pendingFriends.length }}</view>
				</navigator>

				<view class="menuContainer">
					<uni-icons type="plus" size="60rpx"></uni-icons>
					<navigator-bar class="navigator-bar"></navigator-bar>
				</view>
			</view>

			<uni-search-bar placeholder="搜索好友" v-model="searchKeyword" bgColor="white" style="margin: 0 10rpx;"
				cancelButton="none"></uni-search-bar>
		</view>

		<friendItem ref="friends" :searchKeyword="searchKeyword"></friendItem>

	</view>
</template>

<script>
	import {
		gotoUrl
	} from "@/utils.js"

	import friendItem from './items.vue'
	import NavigatorBar from 'pages/NavigatorBar/NavigatorBar.vue'

	import {
		partnerList,
	} from '@/config/api.js'

	export default {
		components: {
			friendItem,
			NavigatorBar
		},
		data() {
			return {
				searchKeyword: '',
				pendingFriends: [],
			}
		},
		onShow() {
			this.$refs.friends.getFriendsFun()
			this.getPendingFriends()
		},
		async onPullDownRefresh() {
			await this.$refs.friends.getFriendsFun()
			await this.getPendingFriends()
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 500)
		},
		methods: {
			async getPendingFriends() {
				const res = await partnerList(0)
				this.pendingFriends = res
			}
		},
	}
</script>

<style scoped lang="scss">
	.decon {
		margin-bottom: 10rpx;
		background: linear-gradient(to bottom, #cbedff, #f5f5f5);
		display: flex;
		flex-flow: column;
	}

	.titleContainer {
		display: flex;
		align-items: center;
		gap: 20rpx;
		padding: 8rpx 28rpx 0;
	}

	.titleText {
		flex: 1;
		color: #41434f;
		font-size: 54rpx;
		font-weight: 900;
	}

	.notificationButton {
		position: relative;
	}

	.notificationButton uni-icons {
		display: block;
	}

	.unreadCount {
		position: absolute;
		top: 0;
		right: 0;
		background-color: red;
		color: white;
		padding: 6rpx;
		font-size: 20rpx;
		min-width: 20rpx;
		text-align: center;
		line-height: 1;
		border-radius: 100vw;
		transform: translate(25%, -25%);
	}

	.menuContainer {
		position: relative;
		outline: none;
	}

	.menuContainer uni-icons {
		display: block;
	}

	.navigator-bar {
		display: none;
		position: absolute;
		right: -5rpx;
		top: 60rpx;
		z-index: 311;
	}

	.menuContainer:hover .navigator-bar {
		display: block;
	}

	.bd {
		width: 100%;
		min-height: 100%;
		background-color: #f5f5f5;
	}
</style>